
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zxx">

<head>
	<title>眼镜电子商务城</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="utf-8">
	<meta name="keywords" content="Goggles a Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
	<script>
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script>
	<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
	<link href="css/login_overlay.css" rel='stylesheet' type='text/css' />
	<link href="css/style6.css" rel='stylesheet' type='text/css' />
	<link rel="stylesheet" href="css/shop.css" type="text/css" />
	<link rel="stylesheet" type="text/css" href="css/checkout.css">
	<link href="css/easy-responsive-tabs.css" rel='stylesheet' type='text/css' />
	<link href="css/style.css" rel='stylesheet' type='text/css' />
	<link href="css/main.css" rel='stylesheet' type='text/css' />
	<link href="css/reset.css" rel='stylesheet' type='text/css' />
	<link href="css/fontawesome-all.css" rel="stylesheet">
</head>

<body>
	<div class="banner-top container-fluid" id="home">
		<!-- header -->
		<header>
			<div class="row">
				<div class="col-md-3 top-info text-left mt-lg-4">
					<h6>客服热线</h6>
					<ul>
						<li>
							<i class="fas fa-phone"></i> 请拨</li>
						<li class="number-phone mt-3">12345678099</li>
					</ul>
				</div>
				<div class="col-md-6 logo-w3layouts text-center">
					<h1 class="logo-w3layouts">
						<a class="navbar-brand" href="index.jsp">
							眼镜商城 </a>
					</h1>
				</div>

				<div class="col-md-3 top-info-cart text-right mt-lg-4">
					<ul class="cart-inner-info">
						<li class="button-log">
							<a class="btn-open" href="#">
								<span class="fa fa-user" aria-hidden="true"></span>
							</a>
						</li>
						<li class="galssescart galssescart2 cart cart box_1">
							<form action="#" method="post" class="last">
								<input type="hidden" name="cmd" value="_cart">
								<input type="hidden" name="display" value="1">
								<button class="top_googles_cart" type="submit" name="submit" value="">
									<a href="checkout.jsp">我的购物车</a>
									<i class="fas fa-cart-arrow-down"></i>
								</button>
							</form>
						</li>
					</ul>
					<!---->
					<div class="overlay-login text-left">
						<button type="button" class="overlay-close1">
							<i class="fa fa-times" aria-hidden="true"></i>
						</button>
						<div class="wrap">
							<c:if test="${empty user}">
								<div class="rightBox" id="loginBox">
									<h5 class="text-center mb-4">登录</h5>
									<div class="login p-5 bg-dark mx-auto mw-100">
										<div class="form-group">
											<span class="colDark">用户名：</span><input id="username" name="username" type="text"><em></em>
											<small id="emailHelp" class="form-text text-muted">我们永远不会将您的信息泄露给任何人</small>
										</div>
										<div class="form-group">
											<span class="colDark">密码：</span><input id="password" name="password" type="password"><em></em>
										</div>
										<button onclick="login()">登录</button>
										<p class="textRight">还没注册？<a href="javascript:void(0);" onclick="changeshow('registerBox','loginBox')" class="colMint">马上注册</a>　</p>
										<p class="colWarning textCenter"></p>
									</div>
									<!---->
								</div>
								
								<div class="rightBox" id="registerBox" style="display:none">
									<h5 class="text-center mb-4">注册</h5>
									<div class="login p-5 bg-dark mx-auto mw-100">
										<div class="form-group">
											<span class="colDark">用户名：</span><input id="runame" name="username" type="text"><em></em>
											<small id="emailHelp" class="form-text text-muted">我们永远不会将您的信息泄露给任何人</small>
										</div>
										<div class="form-group">
											<span class="colDark">密码：</span><input id="rpwd" name="password" type="password"><em></em>
										</div>
										<div class="form-group">
											<span class="colDark">确认：</span><input id="repwd" name="repassword" type="password"><em></em>
										</div>
										<button onclick="reg()">立即注册</button>
										<p class="textRight">已有账号？<a href="javascript:void(0);" onclick="changeshow('loginBox','registerBox')" class="colMint">马上登录</a>　</p>
			            					<p class="colWarning textCenter"></p>
									</div>
									<!---->
								</div>
							</c:if>
							<!-- session里面有这个值，我们就显示这一块 -->
					        <c:if test="${not empty user}">
						        	<div class="rightBox" id="userInfo">
						            <div class="title"><span>用户信息</span></div>
						            	<c:if test="${user.status==0}">
						            		<p class="userName"><span class="colDark">尊敬的用户：${user.nickname }，您好</span></p>
						            	</c:if>
						            <c:if test="${user.status==1}">
						            		<p class="adminInfo">
							            		<span class="colDanger">您好，管理员：${user.nickname }</span>
							            		<a href="back/index.jsp">进入管理界面</a>
							            </p>
						            	</c:if>
						            <p><span class="colDanger">欢迎光临我的眼镜店！</span></p>
						            <p><span class="colDark"><a href="user_center_info.jsp">个人中心</a></span></p>
						            <p><span class="colDark"><a href="javascript:void(0);" id="logout">退出</a></span></p>
						        </div>
					        </c:if>
							
						</div>
					</div>
					<!---->
				</div>
			</div>
			<div class="search">
				<div class="mobile-nav-button">
					<button id="trigger-overlay" type="button">
						<i class="fas fa-search"></i>
					</button>
				</div>
				<!-- open/close -->
				<div class="overlay overlay-door">
					<button type="button" class="overlay-close">
						<i class="fa fa-times" aria-hidden="true"></i>
					</button>
					<form action="#" method="post" class="d-flex">
						<input class="form-control" type="search" placeholder="Search here..." required="">
						<button type="submit" class="btn btn-primary submit">
							<i class="fas fa-search"></i>
						</button>
					</form>

				</div>
				<!-- open/close -->
			</div>
			<label class="top-log mx-auto"></label>
			<nav class="navbar navbar-expand-lg navbar-light bg-light top-header mb-2">

				<button class="navbar-toggler mx-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
				    aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon">
						
					</span>
				</button>
				<div class="collapse navbar-collapse" id="navbarSupportedContent">
					<ul class="navbar-nav nav-mega mx-auto">
						<li class="nav-item">
							<a class="nav-link ml-lg-0" href="index.jsp">主页
								<span class="sr-only">(current)</span>
							</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="about.jsp">关于</a>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
							    aria-expanded="false">
								特征
							</a>
							<ul class="dropdown-menu mega-menu ">
								<li>
									<div class="row">
										<div class="col-md-4 media-list span4 text-left">
											<h5 class="tittle-w3layouts-sub"> 特征</h5>
											<ul>
												<li class="media-mini mt-3">
													<a href="shop.jsp">设计师眼镜</a>
												</li>
												<li class="">
													<a href="shop.jsp">雷朋</a>
												</li>
												<li>
													<a href="shop.jsp">处方眼镜</a>
												</li>
												<li class="mt-3">
													<h5>查看更多页面</h5>
												</li>
												<li class="mt-2">
													<a href="about.jsp">关于</a>
												</li>
												<li>
													<a href="customer.jsp">顾客</a>
												</li>
											</ul>
										</div>
										<div class="col-md-4 media-list span4 text-left">
											<h5 class="tittle-w3layouts-sub">样图 </h5>
											<div class="media-mini mt-3">
												<a href="shop.jsp">
													<img src="images/g2.jpg" class="img-fluid" alt="">
												</a>
											</div>
										</div>
										<div class="col-md-4 media-list span4 text-left">
											<h5 class="tittle-w3layouts-sub">样图 </h5>
											<div class="media-mini mt-3">
												<a href="shop.jsp">
													<img src="images/g3.jpg" class="img-fluid" alt="">
												</a>
											</div>

										</div>
									</div>
									<hr>
								</li>
							</ul>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true"
							    aria-expanded="false">
								店铺
							</a>
							<ul class="dropdown-menu mega-menu ">
								<li>
									<div class="row">
										<div class="col-md-4 media-list span4 text-left">
											<h5 class="tittle-w3layouts-sub"> 类型</h5>
											<ul>
												<li class="media-mini mt-3">
													<a href="shop.jsp">设计师眼镜</a>
												</li>
												<li class="">
													<a href="shop.jsp">雷朋</a>
												</li>
												<li>
													<a href="shop.jsp">处方眼镜</a>
												</li>
												<li>
													<a href="shop.jsp">Rx 太阳镜</a>
												</li>
												<li>
													<a href="shop.jsp">隐形眼镜</a>
												</li>
												<li>
													<a href="shop.jsp">多焦点眼镜</a>
												</li>
												<li>
													<a href="shop.jsp">儿童眼镜</a>
												</li>
												<li>
													<a href="shop.jsp">轻巧眼镜</a>
												</li>
												<li>
													<a href="shop.jsp">运动眼镜</a>
												</li>
											</ul>
										</div>
										<div class="col-md-4 media-list span4 text-left">
											<h5 class="tittle-w3layouts-sub"> 品牌</h5>
											<ul>
												<li class="media-mini mt-3">

													<a href="shop.jsp">布鲁克斯兄弟</a>
												</li>
												<li>
													<a href="shop.jsp">佩索尔</a>
												</li>
												<li>
													<a href="shop.jsp">马球拉尔夫劳伦</a>
												</li>
												<li>
													<a href="shop.jsp">普拉达</a>
												</li>
												<li>
													<a href="shop.jsp">小雷班</a>
												</li>
												<li>
													<a href="shop.jsp">Sferoflex</a>
												</li>
											

												<li>
													<a href="shop.jsp">Polo Ralph Lauren</a>
												</li>
												<li>
													<a href="shop.jsp">Prada</a>
												</li>
												<li>
													<a href="shop.jsp">Ray-Ban Jr</a>
												</li>
											</ul>

										</div>
										<div class="col-md-4 media-list span4 text-left">

											<h5 class="tittle-w3layouts-sub-nav">样图</h5>
											<div class="media-mini mt-3">
												<a href="shop.jsp">
													<img src="images/g1.jpg" class="img-fluid" alt="">
												</a>
											</div>

										</div>
									</div>
									<hr>
								</li>
							</ul>


						</li>
						<li class="nav-item">
							<a class="nav-link" href="contact.jsp">联系我们</a>
						</li>

					</ul>

				</div>
			</nav>
		</header>
    </div>
		<!-- banner -->
		<div class="banner_inner">
			<div class="services-breadcrumb">
				<div class="inner_breadcrumb">

					<ul class="short">
						<li>
							<a href="index.jsp">主页</a>
							<i>|</i>
						</li>
						<li>付款 </li>
					</ul>
				</div>
			</div>

		</div>
		<!--//banner -->
		<!--// header_top -->
		<!--Payment-->
		<h3 class="common_title">确认收货地址</h3>

	<div class="common_list_con clearfix">
		<dl>
			<dt>寄送到：</dt>
			<dd id="addr"></dd>
		</dl>
		<a href="user_center_site.jsp" class="edit_site">编辑收货地址</a>

	</div>
	
	<h3 class="common_title">支付方式</h3>	
	<div class="common_list_con clearfix">
		<div class="pay_style_con clearfix">
			<input type="radio" name="pay_style" checked>
			<label class="cash">货到付款</label>
			<input type="radio" name="pay_style">
			<label class="weixin">微信支付</label>
			<input type="radio" name="pay_style">
			<label class="zhifubao"></label>
			<input type="radio" name="pay_style">
			<label class="bank">银行卡支付</label>
		</div>
	</div>

	<h3 class="common_title">商品列表</h3>
	
	<div class="common_list_con clearfix">
		<ul class="goods_list_th clearfix">
			<li class="col01">商品名称</li>
			<li class="col02">商品属性</li>
			<li class="col03">商品价格</li>
			<li class="col04">数量</li>
			<li class="col05">小计</li>		
		</ul>
		<div id="goods">
			
		</div>
		
	</div>

	<h3 class="common_title">总金额结算</h3>

	<div class="common_list_con clearfix">
		<div class="settle_con">
			<div class="total_goods_count">共<em id="tn"></em>件商品，总金额<b id="tp">元</b></div>
			<div class="transit">运费：<b>55元</b></div>
			<div class="total_pay">实付款：<b id="ttp">元</b></div>
		</div>
	</div>

	<div class="order_submit clearfix">
		<a href="user_center_order.jsp" id="order_btn">提交订单</a>
	</div>	
		
		<!--//Payment-->
		<!--footer -->
		<footer class="py-lg-5 py-3">
			<div class="container-fluid px-lg-5 px-3">
				<div class="row footer-top-w3layouts">
					<div class="col-lg-3 footer-grid-w3ls">
						<div class="footer-title">
							<h3>关于我们</h3>
						</div>
						<div class="footer-text">
							<p>我们是国内首家也是仅此一家专业为用户服务的眼镜商城，欢迎各位进店或者在商城进行购物</p>
							<ul class="footer-social text-left mt-lg-4 mt-3">

								<li class="mx-2">
									<a href="#">
										<span class="fab fa-facebook-f"></span>
									</a>
								</li>
								<li class="mx-2">
									<a href="#">
										<span class="fab fa-twitter"></span>
									</a>
								</li>
								<li class="mx-2">
									<a href="#">
										<span class="fab fa-google-plus-g"></span>
									</a>
								</li>
								<li class="mx-2">
									<a href="#">
										<span class="fab fa-linkedin-in"></span>
									</a>
								</li>
								<li class="mx-2">
									<a href="#">
										<span class="fas fa-rss"></span>
									</a>
								</li>
								<li class="mx-2">
									<a href="#">
										<span class="fab fa-vk"></span>
									</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="col-lg-3 footer-grid-w3ls">
						<div class="footer-title">
							<h3>联系方式</h3>
						</div>
						<div class="contact-info">
							<h4>位置 :</h4>
							<p>湖南省衡阳市蒸湘区呆鹰岭镇鸡窝山.</p>
							<div class="phone">
								<h4>联系 :</h4>
								<p>电话 : +121 098 8907 9987</p>
								<p>电子邮件 :
									<a href="mailto:info@example.com">info@example.com</a>
								</p>
							</div>
						</div>
					</div>
					<div class="col-lg-3 footer-grid-w3ls">
						<div class="footer-title">
							<h3>友情链接</h3>
						</div>
						<ul class="links">
							<li>
								<a href="index.jsp">主页</a>
							</li>
							<li>
								<a href="about.jsp">关于我们</a>
							</li>
							
							<li>
								<a href="shop.jsp">店</a>
							</li>
							<li>
								<a href="contact.jsp">联系我们</a>
							</li>
						</ul>
					</div>
					<div class="col-lg-3 footer-grid-w3ls">
						<div class="footer-title">
							<h3>注册享受优惠</h3>
						</div>
						<div class="footer-text">
							<p>订阅我们的邮件列表，您将始终获得我们的最新消息和更新.</p>
							<form action="#" method="post">
								<input class="form-control" type="email" name="Email" placeholder="请输入您的邮箱..." required="">
								<button class="btn1">
									<i class="far fa-envelope" aria-hidden="true"></i>
								</button>
								<div class="clearfix"> </div>
							</form>
						</div>
					</div>
				</div>
				<div class="copyright-w3layouts mt-4">
					<p class="copy-right text-center ">&copy; 2018 眼镜商城. 保留所有权利 | 由 W3layouts设计 </a>
					</p>
				</div>
			</div>
		</footer>
		
		<div class="popup_con">
			<div class="popup">
				<p>订单提交成功！</p>
			</div>
			
			<div class="mask"></div>
		</div>
		
		<!-- //footer -->
		<!--jQuery-->
		<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
		<script type="text/javascript">
			$('#order_btn').click(function() {
				alert("订单提交成功！");
			});
		</script>	
		
		<script src="js/jquery-2.2.3.min.js"></script>
		<script>
			function changeshow(show,hide){
				$("#"+show).css("display","block");
				$("#"+hide).css("display","none");
			}
			
			//退出登录
			$("#logout").on("click",function(){
				$.post("userServlet",{
					op:'logout'
				},function(data){
					location.reload();
				},"text");
			});
			
			//登录
			function login(){
				//首先得到数据
				var nickname=$("#username").val();
				var pwd=$("#password").val();
				
				if( nickname==null || nickname=="" || pwd==""  || pwd==null ){
					$(".colWarning").html("用户名或密码不能为空");
				}else{
					//发送ajax请求
					$.post("userServlet",{
						op:'login',
						nickname:nickname,
						pwd:pwd
					},function(data){
						if( data<=0 ){
							$(".colWarning").html("用户名或密码错误");
						}else if( data==2 ){
							$(".colWarning").html("您的账号已被封禁，请联系管理员xxxxx@qq.com...");
						}else{
							$(".colWarning").html("登陆成功，页面将自动刷新...");
							//延时器
							setTimeout(function(){
								location.reload();
							},1500);
						}
					},"text");
				}
			}
			
			//注册
			function reg(){
				var rnickname=$("#runame").val();
				var rpwd=$("#rpwd").val();
				var repwd=$("#repwd").val();
				
				if( rpwd!=repwd ){
					$(".colWarning").eq(1).html("两次输入的密码不一致");
				}else if( rnickname==null || rnickname=="" || rpwd=="" || rpwd==null ){
					$(".colWarning").eq(1).html("用户名或者密码不能为空");
				}else{
					$.post("userServlet",{
						op:'reg',
						rnickname:rnickname,
						rpwd:rpwd
					},function(data){
						if( data<=0 ){
							$(".colWarning").eq(1).html("注册失败");
						}else{
							$(".colWarning").eq(1).html("注册成功，即将跳转到登陆界面");
							
							setTimeout(function(){
								$("#runame").val("");
								$("#rpwd").val("");
								$("#repwd").val("");
								
								changeshow('loginBox','registerBox');
								
								$("#username").val(rnickname);
							},1500);
						}
					},"text");
				}
				
			}
		</script>
		
		<script type="text/javascript">
		//地址
		$.post("orderServlet",{
			op:'getAllAddr',
			status:status
		},function(data){
			var str='<input type="radio" name="" checked="">';
			if( data.length<=0 ){
				alert("请先添加收货地址");
				location.href="user_center_site.jsp";
			}else{
				for( var i=0;i<data.length;i++ ){
					if( data[i].status==1 ){
						str+=data[i].province+' '+data[i].city+' '+data[i].area+' '+data[i].addr +
						 ' ('+data[i].name+' 收)' + data[i].tel;
					}
				}
			}
			$("#addr").html(str);
		},"json");
		
		
		//商品详情
		var totalprice=0;
		var totalnum=0;
		$.post("orderServlet",{
			op:'cartGoods',
		},function(data){
			var str='';
			for( var i=0;i<data.length;i++ ){
				str+='<ul class="goods_list_td clearfix"><li class="col01">'+(i+1)+'</li>';
				str+='<li class="col02"><img src="'+data[i].pics+'"></li>';
				str+='<li class="col03">'+data[i].gname+'</li><li class="col04">拉风的眼镜</li>';
				str+='<li class="col05">'+data[i].price+'元</li><li class="col06">'+data[i].num+'</li>';
				str+='<li class="col07">'+data[i].num*data[i].price+'元</li></ul>';
				totalprice+=data[i].num*data[i].price
				totalnum=i+1

			}
			$("#goods").html(str);
			
			//其他内容
			$("#tp").html(totalprice);
			$("#tn").html(totalnum);
			$("#ttp").html(totalprice+55);
		},"json");	
		
		
		</script>
		
		
		<!-- newsletter modal -->
		<!--search jQuery-->
		<script src="js/modernizr-2.6.2.min.js"></script>
		<script src="js/classie-search.js"></script>
		<script src="js/demo1-search.js"></script>
		<!--//search jQuery-->
		<!-- cart-js -->
		<script src="js/minicart.js"></script>
		<script>
			googles.render();

			googles.cart.on('googles_checkout', function (evt) {
				var items, len, i;

				if (this.subtotal() > 0) {
					items = this.items();

					for (i = 0, len = items.length; i < len; i++) {}
				}
			});
		</script>
		<!-- //cart-js -->
		<script>
			$(document).ready(function () {
				$(".button-log a").click(function () {
					$(".overlay-login").fadeToggle(200);
					$(this).toggleClass('btn-open').toggleClass('btn-close');
				});
			});
			$('.overlay-close1').on('click', function () {
				$(".overlay-login").fadeToggle(200);
				$(".button-log a").toggleClass('btn-open').toggleClass('btn-close');
				open = false;
			});
		</script>
		<!-- carousel -->
		<!-- easy-responsive-tabs -->
		<script src="js/easy-responsive-tabs.js"></script>
		<script>
			$(document).ready(function () {
				$('#horizontalTab').easyResponsiveTabs({
					type: 'default', //Types: default, vertical, accordion           
					width: 'auto', //auto or any width like 600px
					fit: true, // 100% fit in a container
					closed: 'accordion', // Start closed if in accordion view
					activate: function (event) { // Callback function if tab is switched
						var $tab = $(this);
						var $info = $('#tabInfo');
						var $name = $('span', $info);
						$name.text($tab.text());
						$info.show();
					}
				});
				$('#verticalTab').easyResponsiveTabs({
					type: 'vertical',
					width: 'auto',
					fit: true
				});
			});
		</script>

		<!-- credit-card -->
		<script type="text/javascript" src="js/creditly.js"></script>
		<link rel="stylesheet" href="css/creditly.css" type="text/css" media="all" />

		<script type="text/javascript">
			$(function () {
				var creditly = Creditly.initialize(
					'.creditly-wrapper .expiration-month-and-year',
					'.creditly-wrapper .credit-card-number',
					'.creditly-wrapper .security-code',
					'.creditly-wrapper .card-type');

				$(".creditly-card-form .submit").click(function (e) {
					e.preventDefault();
					var output = creditly.validate();
					if (output) {
						// Your validated credit card output
						console.log(output);
					}
				});
			});
		</script>
		<!-- //credit-card -->
		<!-- dropdown nav -->
		<script>
			$(document).ready(function () {
				$(".dropdown").hover(
					function () {
						$('.dropdown-menu', this).stop(true, true).slideDown("fast");
						$(this).toggleClass('open');
					},
					function () {
						$('.dropdown-menu', this).stop(true, true).slideUp("fast");
						$(this).toggleClass('open');
					}
				);
			});
		</script>
		<!-- //dropdown nav -->
		<script src="js/move-top.js"></script>
    <script src="js/easing.js"></script>
    <script>
        jQuery(document).ready(function($) {
            $(".scroll").click(function(event) {
                event.preventDefault();
                $('html,body').animate({
                    scrollTop: $(this.hash).offset().top
                }, 900);
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            /*
            						var defaults = {
            							  containerID: 'toTop', // fading element id
            							containerHoverID: 'toTopHover', // fading element hover id
            							scrollSpeed: 1200,
            							easingType: 'linear' 
            						 };
            						*/

            $().UItoTop({
                easingType: 'easeOutQuart'
            });

        });
    </script>
    <!--// end-smoth-scrolling -->


		<!-- //smooth-scrolling-of-move-up -->
		<script src="js/bootstrap.js"></script>
		<!-- js file -->
</body>

</html>